<template>
  <div>
    <SearchContainer @reset="() => formRef.resetFields()" @search="onSearch">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="dateRange" label="配镜时间" class="w-[320px]">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
        </a-form-item>
        <a-form-item name="type" label="" class="ml-3">
          <a-radio-group v-model:value="formState.type" @change="getData()">
            <a-radio value="1">按开单人统计</a-radio>
            <a-radio value="2">按经手人统计</a-radio>
            <a-radio value="3">按推荐医生统计</a-radio>
            <a-radio value="4">按配镜医生统计</a-radio>
            <a-radio value="5">按验光师统计</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex justify-end mb-2">
        <div class="flex justify-end">
          <BaseExport type="视光" name="销售业绩" code="000999" :search-params="{ ...formState }">导出</BaseExport>
        </div>
      </div>
      <BaseTable
        :columns="columns"
        :loading="loading"
        :extra-height="90"
        :data-source="tableData"
        fill
        :row-class-name="getRowClass"
        :scroll="{ x: 2500 }"
        :pagination="pagination"
      >
        <!-- 自定义表头 -->
        <template #bodyCell="{ column, index }">
          <template v-if="column.dataIndex === 'xh'"> {{ index + 1 }} </template>
        </template>
        <template #summary>
          <a-table-summary fixed>
            <a-table-summary-row>
              <a-table-summary-cell> 合计 </a-table-summary-cell>
              <a-table-summary-cell> - </a-table-summary-cell>
              <a-table-summary-cell> - </a-table-summary-cell>
              <a-table-summary-cell> - </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.jjCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.jjAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.jpCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.jpAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.yxyjCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.yxyjAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.jsCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.jsAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.sbCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.sbAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.sgqtCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.sgqtAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.totalAllAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.discountCount || '0' }}
                </div>
              </a-table-summary-cell>
              <a-table-summary-cell>
                <div class="text-right">
                  {{ bottomTotal.orderAmount || '0.00' }}
                </div>
              </a-table-summary-cell>
            </a-table-summary-row>
          </a-table-summary>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'

const formRef = ref()
const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  type: '1'
})

const columns = [
  { title: '序号', dataIndex: 'xh', width: 60 },
  { title: '人员', dataIndex: 'empName', width: 100 },
  { title: '工号', dataIndex: 'createUser', width: 100 },
  { title: '科室', dataIndex: 'ksmc', width: 100 },
  {
    title: '镜架',
    dataIndex: 'jj',
    width: 200,
    children: [
      { title: '数量', dataIndex: 'jjCount', width: 100, align: 'right' },
      { title: '金额', dataIndex: 'jjAmount', width: 100, align: 'right' }
    ]
  },
  {
    title: '镜片',
    dataIndex: 'jp',
    width: 200,
    children: [
      { title: '数量', dataIndex: 'jpCount', width: 100, align: 'right' },
      { title: '金额', dataIndex: 'jpAmount', width: 100, align: 'right' }
    ]
  },
  // {
  //   title: '定制镜片',
  //   dataIndex: 'dzjp',
  //   width: 200,
  //   children: [
  //     { title: '数量', dataIndex: 'sl', width: 100 },
  //     { title: '金额', dataIndex: 'je', width: 100 }
  //   ]
  // },
  {
    title: '隐形眼镜',
    dataIndex: 'yxyj',
    width: 200,
    children: [
      { title: '数量', dataIndex: 'yxyjCount', width: 100, align: 'right' },
      { title: '金额', dataIndex: 'yxyjAmount', width: 100, align: 'right' }
    ]
  },
  {
    title: '角塑',
    dataIndex: 'js',
    width: 200,
    children: [
      { title: '数量', dataIndex: 'jsCount', width: 100, align: 'right' },
      { title: '金额', dataIndex: 'jsAmount', width: 100, align: 'right' }
    ]
  },
  {
    title: '设备',
    dataIndex: 'sb',
    width: 200,
    children: [
      { title: '数量', dataIndex: 'sbCount', width: 100, align: 'right' },
      { title: '金额', dataIndex: 'sbAmount', width: 100, align: 'right' }
    ]
  },
  {
    title: '视光其他',
    dataIndex: 'sgqt',
    width: 200,
    children: [
      { title: '数量', dataIndex: 'sgqtCount', width: 100, align: 'right' },
      { title: '金额', dataIndex: 'sgqtAmount', width: 100, align: 'right' }
    ]
  },
  { title: '销售总金额', dataIndex: 'totalAllAmount', width: 100, align: 'right' },
  { title: '优惠金额', dataIndex: 'discountCount', width: 100, align: 'right' },
  { title: '实际金额', dataIndex: 'orderAmount', width: 100, align: 'right' }
]

const { loading, tableData, getData, pagination } = useTable({
  url: '/optometry/ooadolescentcheck/getOoOpticaionByEmpldStatistic',
  formatParams: () => {
    getTotal({
      ...formState.value,
      stdate: formState.value.dateRange?.[0],
      eddate: formState.value.dateRange?.[1]
    })
    return {
      ...formState.value,
      stdate: formState.value.dateRange?.[0],
      eddate: formState.value.dateRange?.[1]
    }
  },
  formatResult: (result = []) => {
    return result.map((item) => {
      return {
        ...item,
        aptmDoctorName: item.aptmDoctorName + ' ' + (item.aptmDeptName || ''),
        isEcgStr: item.isEcg ? '是' : '否',
        isRecurrenceStr: item.isRecurrence ? '是' : '否',
        oprPathStr: ['住院', '门诊'][item.oprPath]
      }
    })
  }
})

const bottomTotal = ref({})
const getTotal = async (params) => {
  const { code, data } = await post('/optometry/ooadolescentcheck/getOoOpticaionByEmpldStatisticHj', params)
  if (code !== 0) return message.error(code)
  bottomTotal.value = data
}
const getRowClass = (record) => {
  return record.status === '0' ? '' : 'table-row-readonly-not-last'
}

const onSearch = () => {
  formState.value.type && getData()
}
</script>
